<template>
  <div>
    <van-nav-bar left-text="返回"
                 right-text="按钮"
                 left-arrow
                 title="分类"
                 @click-left="$router.go(-1)">
    </van-nav-bar>
    <van-search shape="round"></van-search>

    <div class="con_wrap">
      <!-- 左侧一级分类 -->
      <van-sidebar class="myslidebar"
                   v-model="activeKey">
        <van-sidebar-item :title="item.name"
                          v-for="item in cateList"
                          :key="item.id"
                          @click="changeData(item.id)" />
      </van-sidebar>
      <div class="card_list">
        <h1 v-if="!showFlag">暂无数据</h1>
        <!-- 分类商品 -->
        <div v-if="showFlag">
          <van-card v-for="item in goodsList"
                    :key="item.id"
                    :price="item.minPrice"
                    :desc="item.characteristic"
                    :title="item.name"
                    :thumb="item.pic">

          </van-card>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import { getCateApi } from '../../api/home'
import { getCateList } from '../../api/category'
export default {
  name: 'Ljfvue2011Index',

  data () {
    return {
      activeKey: 0,
      cateList: [], //一级分类数据
      defId: null,//默认的id
      goodsList: [],//分类商品
      showFlag: true
    };
  },
  created () {

    // axios 请求一级分类数据
    getCateApi().then(res => {
      console.log(res)
      this.cateList = res.data.data;
      // 是不是从首页跳转来的
      if (this.$route.params.cid) {
        this.defId = this.$route.params.cid;
        this.activeKey = this.$route.params.index;
      } else {
        // 存储第一条数据的id 为默认的id
        this.defId = res.data.data[0].id
      }
      console.log(this.defId)
      // 获取默认的分类商品
      this.getProList();
    })

  },
  mounted () {

  },

  methods: {
    changeData (id) { //点击一级分类 改变默认id
      this.defId = id;
      this.getProList();//获取分类商品
    },
    // 获取分类商品
    async getProList () {
      var res = await getCateList({
        page: 1,
        pageSize: 100,
        categoryId: this.defId
      })
      console.log(res)
      if (res.data.code == 0) {
        this.goodsList = res.data.data;
        this.showFlag = true;
      }
      if (res.data.code == 700) {
        this.goodsList = [];
        this.showFlag = false;
      }

    }

  },
};
</script>

<style lang="less" scoped>
.myslidebar {
  width: 25%;
  height: 90vh;
  overflow-y: scroll;
}
.card_list {
  width: 75%;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 90vh;
}
.con_wrap {
  display: flex;
  margin-top: 10px;
  .card_list {
    flex: 1;
    margin-left: 20px;
  }
}
</style>